<template>
  <div class="my">
    <HomeNav></HomeNav>
    <div ref="refList" class="content-list">
      <div class="bg">
        <div class="module-wrap">
          <div class="account-info flex flex-column flex-center">
            <div class="avatar flex-center">
              <img v-if="userInfo.headUrl" :src="userInfo.headUrl" alt="" />
              <div class="avatar-text" v-else>
                {{initial}}
              </div>
            </div>
            <div class="user-name">您好，{{ userInfo.realName }}</div>
            <div class="user-pwd flex-center" @click="pushRouter('/my/changePassword')">
              <p>修改密码</p>
              <img src="@/assets/my/icon-upd.png" alt="" />
            </div>
          </div>

          <ul class="cell-group">
            <li
              class="flex-between"
              v-for="item in cellList"
              :key="item.name"
              @click="pushRouter(item.url, item.name)"
            >
              <div class="cell-name flex-start">
                <p :class="'icon-' + item.name"></p>
                <p>{{ item.title }}</p>
              </div>
              <div class="cell-router flex-end">
                <span class="icon-num flex-center" v-if="item.name == 'workmsg' && unreadNum > 0">{{
                  unreadNum
                }}</span>
                <img src="@/assets/icon/icon-more.png" alt="" />
              </div>
            </li>
          </ul>
        </div>
        <div class="logout-cell flex-center" @click="logout">退出账号</div>
      </div>
    </div>
    <Tabbar />
    <VersionInfo
      :visible="updateVisible"
      :version-info="versionInfo"
      @close="updateVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { showConfirmDialog, showToast } from 'vant'
import { useUserStore } from '@/store'
import Tabbar from '@/components/Tabbar'
import VersionInfo from './components/VersionInfo.vue'
import MyService from '@/api/my'
import { config } from '@/config'
import md5 from 'md5'
import HomeNav from '@/views/home/components/HomeNav.vue'
import ContactServe from '@/api/contact.ts'
import { getVideoUrl } from '@/utils/index'

const router = useRouter()

// 取出用户信息
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const cellList = ref([
  { title: '工作消息', name: 'workmsg', url: '/msg' },
  { title: '我的收藏', name: 'fav', url: '/my/myFavourite' },
  { title: '视频会议', name: 'videomeet', url: '' }
  // {title: '下载列表', name: 'download', url: ''},
])

//工作消息未读数量
const unreadNum = ref(0)
ContactServe.unreadCount().then(ret => {
  unreadNum.value = ret.data
})

// 检查更新
const updateVisible = ref<boolean>(false)
const versionInfo = ref({})
const checkUpdate = () => {
  MyService.getVersionInfo().then(res => {
    if (compareVersions(res.version, config.version) === 1) {
      versionInfo.value = res
      updateVisible.value = true
    } else {
      showToast('已是最新版本')
    }
  })
}

/**
 * 版本号比较
 * @param v1 新版本
 * @param v2 旧版本
 * @returns v1新则返回1，v2新则返回-1，相等则返回0
 */
const compareVersions = (v1: string, v2: string) => {
  const v1parts = v1.split('.')
  const v2parts = v2.split('.')
  for (let i = 0; i < v1parts.length; i++) {
    if (v2parts.length === i) {
      return 1
    }
    if (v1parts[i] === v2parts[i]) {
      continue
    } else if (v1parts[i] > v2parts[i]) {
      return 1
    } else {
      return -1
    }
  }
  if (v1parts.length !== v2parts.length) {
    return -1
  }
  return 0
}

// 跳转到指定页面
const pushRouter = (path: string, type: string) => {
  //视频会议
  if (type == 'videomeet') {
    handleMeeting()
  } else {
    router.push(path)
  }
}

const handleMeeting = () => {
  const url = getVideoUrl();
  window.open(url, '_blank')
}
const logout = () => {
  showConfirmDialog({
    message: '确认退出登录吗?'
  })
    .then(() => {
      return userStore.logout()
    })
    .then(() => {
      // window.location.href = '/'
      // router.replace('/login')
      window.location.reload()
    })
}
const initial = computed(() => {
  if (userInfo.value) return userInfo.value.realName.slice(0, 1)
  return ''
})
</script>

<style lang="less" scoped="scoped">
.my {
  height: 100vh;
  box-sizing: border-box;
  overflow: auto;
  display: flex;
  flex-direction: column;
  color: #212121;

  .content-list {
    flex-grow: 1;
    margin-top: -1px;
    overflow-y: scroll;
    > .bg {
      padding-top: 12.5px;
      padding-bottom: 25px;
      background: linear-gradient(180deg, #3a75c5 0%, #3a75c500 220px, #ffffff00 100%);
    }
  }

  .module-wrap {
    border-radius: 10px;
    margin: 5px 12px;
    padding: 16px 0 8px;
    background: #fff;
  }

  .account-info {
    .avatar {
      width: 79px;
      height: 79px;
      background: #3a75c5;
      border-radius: 50%;
      overflow: hidden;
      margin: 4px 0 12px;
      img {
        width: 100%;
        height: 100%;
        box-shadow: 0px 5px 10px 0px #00000019;
      }

      .avatar-text {
        color: #fff;
        font-size: 24px;
        text-align: center;
        line-height: 79px;
        flex-shrink: 0;
      }
    }
    .user-name {
      font-weight: 900;
      font-size: 21px;
    }
    .user-pwd {
      color: #21212199;
      font-size: 13px;
      margin: 10px 0 16px;
      img {
        width: 13px;
        margin-left: 4px;
      }
    }
  }

  .cell-group {
    padding: 0 2px;
    li {
      height: 52px;
      font-size: 15px;
      font-weight: 900;
      padding: 0 13px;
      position: relative;
      .cell-name {
        @arr: workmsg, fav, videomeet, download;
        each(@arr, {
          @num:extract(@arr, @index);
          .icon-@{value} {
            width: 19px;
            height: 19px;
            background: url("@/assets/my/icon-@{num}.png") no-repeat center center;
            background-size: 19px 19px;
            margin-right: 11px;
          }
      });
      }
      .cell-router {
        img {
          width: 12px;
        }
        .icon-num {
          height: 17px;
          padding: 0 8px;
          border-radius: 10px;
          background: linear-gradient(90deg, #f52f45 0%, #f55f5f 100%);
          box-shadow: 0px 2px 5px 0px #f65e5f19;
          font-size: 13px;
          font-weight: 900;
          margin-right: 10px;
          color: #fff;
        }
      }
      &:hover {
        background: rgba(58, 117, 197, 0.1);
      }
      &::after{
        content: "";
        display: block;
        border-bottom: 1px solid #e9e9e9;
        position: absolute;
        height: 1px;
        bottom: 0;
        left: 42px;
        right: 10px;
      }
      &:last-child::after{
        display: none;
      }
    }
  }

  .logout-cell {
    margin: 24px 12px;
    box-sizing: border-box;
    height: 48px;
    color: #21212199;
    font-size: 16px;
    background-color: #fff;
    border-radius: 8px;
  }
}
</style>
